<template>
  <div id="main">
    <transition
            :enter-active-class="enter"
            :leave-active-class="leave">
      <router-view class="router-view"></router-view>
    </transition>
  </div>
</template>

<script>
  import 'animate.css';
  import { links } from './components';
  export default {
      name: 'app',

      data() {
        return {
            enter:'',
            leave:''
        }
      },

      components:{
          links
      },

      watch: {
          '$route' (to, from) {
              const toDepth = to.path.split('/').length;
              const fromDepth = from.path.split('/').length;
              this.enter = toDepth < fromDepth ? 'animated fadeInLeft' : 'animated fadeInRight';
              this.leave = toDepth < fromDepth ? 'animated fadeOutRight' : 'animated fadeOutLeft';
          }
      }
  };
</script>
<style lang="less" scoped>
  .router-view {
    position: absolute;
    width: 100%;
    left:0;
    top:0;
  }
  .animated {
    animation-duration: .5s;
  }
</style>
